<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>


	<head>
		<style>
			.layui-tab-content {
				padding: 0;/*layui-tab-content:默认有padding: 10px;的值，因为iframe的绝对定位脱离文档流，所以会存在20px的空白空间*/
			}
			.show-frame {
				top: 50px!important;
				/*默认.layui-layout-admin .layui-body {
                    top: 60px;
                    bottom: 44px;
                }*/
				overflow: hidden;/*消除浏览器最右边的滚动条*/
			}
			.frame {
				position: absolute;
				padding: 10px;/*与layui-footer隔开一段距离*/
				width: 100%;
				height: 100%;
			}
		</style>

	<title>Title</title>
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/layui/css/layui.css">
	<script type="text/javascript" src="${pageContext.request.contextPath}/layui/layui.js"></script>

	<script type="text/javascript">

        layui.use(["element",'table',"jquery","layer","form","upload"], function() {
            var upload = layui.upload;
            var table = layui.table;
            var layer = layui.layer;
            var form = layui.form;
            var $ = layui.jquery;
            var element=layui.element;

    $.ajax({
        url:"${pageContext.request.contextPath}/menu/select"
        ,type:"post"
        ,success:function(data){
           // console.log(data);
            var  array=data.menus;
            var html="";
           $.each(array,function (index,obj) {
                html+="<li class=\"layui-nav-item\"><a href=\"javascript:;\">";
              	//console.log(obj.name);
			   html+=obj.name;
			   html+="</a>";
				if(obj.menuList!=null&obj.menuList!=0){
                   // console.log(obj.menuList);
                    html+="<dl class=\"layui-nav-child\">";
                   		 $.each(obj.menuList,function (index,ppp) {
                   		     html+="<dd><a href=\"javascript:;\" onclick=\"dd("
								 +"'"+ppp.url+"',"
                                 +"'"+ppp.name+"',"
									+ppp.id
                                 +")\">"+
								ppp.name+"</a></dd>";
						 })
                  html+="</dl>";
				}
               html+="</li>";
            })
           // console.log(html)
           $("#mainMenu").html(html);

			element.render("mainMenu","test");

        }
    })


        })
        function dd(url,name,id) {
            layui.use(["element",'table',"jquery","layer","form","upload"], function() {
                var layer = layui.layer;
                var form = layui.form;
                var $ = layui.jquery;
                var element = layui.element;

                if($("li[lay-id="+id+"]").length==0){
            element.tabAdd('demo', {
                    title: name
                    , content: '<iframe class="frame" src="${pageContext.request.contextPath}'+url+'" height="100%" width="100%"></iframe>'
                    , id:id
			});
				}
            element.tabChange('demo', id); //切换到 lay-id="yyy" 的这一项

		})
        }

	</script>



</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
	<div class="layui-header">
		<div class="layui-logo">layui 后台布局</div>
		<!-- 头部区域（可配合layui已有的水平导航） -->
		<ul class="layui-nav layui-layout-left" id="myCase">
			<li class="layui-nav-item"><a href="javascript:;">控制台</a></li>
			<li class="layui-nav-item"><a href="">商品管理</a></li>
			<li class="layui-nav-item"><a href="">用户</a></li>
			<li class="layui-nav-item">
				<a href="javascript:;">其它系统</a>
				<dl class="layui-nav-child">
					<dd><a href="">
						邮件管理
					</a></dd>
					<dd><a href="" >消息管理</a></dd>
					<dd><a href="">授权管理</a></dd>
				</dl>
			</li>
		</ul>
		<ul class="layui-nav layui-layout-right">
			<li class="layui-nav-item">
				<a href="javascript:;">
					<%--http://t.cn/RCzsdCq--%>
					<img src="D:\苗冬\framework\cmfz\src\main\webapp\cmfz\img/15739545649511561185092519.jpg"" class="layui-nav-img">
					半个鸭蛋壳
				</a>


				<img src="D:\winter\framework\cmfz\src\main\webapp\cmfz\img/15739545649511561185092519.jpg"/>

				<dl class="layui-nav-child">
					<dd><a href="" >基本资料</a> </dd>
					<dd><a href="">安全设置</a></dd>
				</dl>
			</li>
			<li class="layui-nav-item"><a href="">退了</a></li>
		</ul>
	</div>

	<div class="layui-side layui-bg-black">
		<div class="layui-side-scroll">
			<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
			<ul class="layui-nav layui-nav-tree" id="mainMenu"  lay-filter="test">

			</ul>
		</div>
	</div>

	<div class="layui-body">
		<!-- 内容主体区域 -->
		<div class="layui-tab" lay-filter="demo"  lay-allowClose="true">
			<ul class="layui-tab-title">

			</ul>
			<div class="layui-tab-content" >

			</div>
		</div>


	</div>

	<div class="layui-footer">
		<!-- 底部固定区域 -->
		© layui.com - 底部固定区域
	</div>
</div>
<script src="../src/layui.js"></script>
<script>
    //JavaScript代码区域
    layui.use('element', function(){
        var element = layui.element;

    });
</script>
</body>
</html>
